<div class="contentArea">
  <div class="Item hr">
    <div class="current">在线客服</div>
  </div>
  <form>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1 config">
      <tr>
        <th width="200">开启前台客服：</th>
        <td><label><input name="config[SERVICE_SWITCH]" type="radio" value="1" <eq name="SERVICE_SWITCH" value="1">checked</eq> /> 开</label>&nbsp;<label><input name="config[SERVICE_SWITCH]" type="radio" value="0" <eq name="SERVICE_SWITCH" value="0">checked</eq> /> 关</label></td>
      </tr>
      <tr>
        <th width="200">客服QQ：</th>
        <td><textarea class="jq_watermark" rows="2" cols="68" name="config[SERVICE_QQ]" placeholder="示例：QQ1|昵称1,QQ2|昵称2">{$SERVICE_QQ|implode=',',###}</textarea></td>
      </tr>
      <tr>
        <th width="200">淘宝旺旺：</th>
        <td><textarea class="jq_watermark" rows="2" cols="68" name="config[SERVICE_WANGWANG]" placeholder="示例：旺旺1|昵称1,旺旺2|昵称2">{$SERVICE_WANGWANG|implode=',',###}</textarea></td>
      </tr>
      <tr>
        <th width="200">默认展开客服列表：</th>
        <td><label><input name="config[SERVICE_OPEN]" type="radio" value="1" <eq name="SERVICE_OPEN" value="1">checked</eq> /> 开</label>&nbsp;<label><input name="config[SERVICE_OPEN]" type="radio" value="0" <eq name="SERVICE_OPEN" value="0">checked</eq> /> 关</label></td>
      </tr>
      <tr>
        <th width="200">悬浮：</th>
        <td><label><input name="config[SERVICE_FLOAT]" type="radio" value="left" <eq name="SERVICE_FLOAT" value="left">checked</eq> /> 左边</label>&nbsp;<label><input name="config[SERVICE_FLOAT]" type="radio" value="right" <eq name="SERVICE_FLOAT" value="right">checked</eq> /> 右边</label></td>
      </tr>
      <tr>
        <th width="200">样式选择：</th>
        <td>
		<a href="javascript:;" class="service_skin service_blue <eq name='SERVICE_SKIN' value='blue'> selected</eq>" data-skin="blue"></a>
		<a href="javascript:;" class="service_skin service_green <eq name='SERVICE_SKIN' value='green'> selected</eq>" data-skin="green"></a>
		<a href="javascript:;" class="service_skin service_gray <eq name='SERVICE_SKIN' value='gray'> selected</eq>" data-skin="gray"></a>
		<a href="javascript:;" class="service_skin service_yellow <eq name='SERVICE_SKIN' value='yellow'> selected</eq>" data-skin="yellow"></a>
		<a href="javascript:;" class="service_skin service_red <eq name='SERVICE_SKIN' value='red'> selected</eq>" data-skin="red"></a>
		<a href="javascript:;" class="service_skin service_pink <eq name='SERVICE_SKIN' value='pink'> selected</eq>" data-skin="pink"></a>
        <input type="hidden" name="config[SERVICE_SKIN]" id="SERVICE_SKIN" value="{$SERVICE_SKIN}" />
        </td>
      </tr>
    </table>
  </form>
  <div class="commonBtnArea" >
    <button class="btn submit">提交</button>
  </div>
</div>
<style type="text/css">
.service_skin{
	float:left;
	display:inline;
	width:15px;
	height:15px;
	background:#F00;
	margin-right:5px;
	outline:none;
}
.service_blue{background:#8fd1f9;}
.service_green{background:#77bf30;}
.service_gray{background:#d2d2d2;}
.service_yellow{background:#f7a319;}
.service_red{background:#d00909;}
.service_pink{background:#ea556f;}
.service_skin.selected{
	border:2px #000 solid;
	width:11px;
	height:11px;
}

</style>
<script type="text/javascript" src="__PUBLIC__/Min/?f=__PUBLIC__/admin/js/poshytip/jquery.poshytip.min.js">
</script>
<script type="text/javascript">
$(".submit").click(function(){
    commonAjaxSubmit("__SELF__");
    return false;
});
$(".service_skin").on("click", function(){
	var skin = $(this).data("skin");
	$(this).addClass("selected").siblings("a").removeClass("selected");
	$("#SERVICE_SKIN").val(skin);
});
$('.service_skin').poshytip({
	alignY: 'left',
	content: function(updateCallback) {
		var skin = $(this).data("skin");
		var img = '__PLUS__/service/'+skin+'.png';
		var html = "<img src='__PLUS__/service/"+skin+".png'>";
		updateCallback(html);
	}
});
</script>
